<template>
  <el-dialog title="修改管理员信息" :visible="visible" @close="handleClose">
    <div class="wrap">
      <div class="content">
        <el-form class="mt-30" ref="form" :model="form" label-width="150px">
          <el-form-item label="用户名">
            <span>{{form.userName}}</span> 
          </el-form-item>
          <el-form-item label="真实姓名" prop="realName" :rules="[ { required: true, message: '真实姓名不能为空'}]">
            <el-input v-model="form.realName"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phoneNumber" :rules="[ { required: true, message: '手机号不能为空'}]">
            <el-input v-model="form.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" :rules="[ { required: true, message: '邮箱不能为空'}]">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" style="width:100%;">
              <el-option :value="0" label="男"></el-option>
              <el-option :value="1" label="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" v-if="!doPassword">
            <el-button type="text"  @click="editPasswordType">修改密码</el-button>
          </el-form-item>
          <el-form-item label="登录密码" v-if="doPassword" prop="passWord">
            <el-input v-model="passWord" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props: ['visible', 'data'],
    watch: {
      data() {
        this.form = JSON.parse(JSON.stringify(this.data))
      }
    },
    data () {
      return {
        form: {
          userName: '',
          realName: '',
          phoneNumber: '',
          email: '',
          passWord: '',
          sex: ''
        },
        passWord: '',
        doPassword: false
      }
    },
    activated() {
      this.loadData()
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        this.form = JSON.parse(JSON.stringify(this.data))
      },
      handleClose() {
        this.$emit('update:visible', false)
      },
      onSubmit() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.$api.administrators.update(this.form).then(res => {
              if(res.success) {
                this.$message.success('保存成功')
                this.$refs.form.resetFields()
                this.$emit('change', true)
              }
            })
          }
        })
      },
      editPasswordType() {
        this.doPassword = true;
      },
      onReset() {
        this.form = {
          ...this.form,
          sex: '',
          realName: '',
          phoneNumber: '',
          email: '',
          status: '',
          passWord: ''
        }
      }
    }
  }
</script>

<style>

 
</style>
